<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        /* 上下 左右 */
        margin: 200px auto;
        background-color: burlywood;
        /* 添加绑定动画 */
        /*  infinite 无限循环*/
        animation: move 2s linear 3 2s infinite;
    }

    /* 自定义动画 过渡 */

    @keyframes move {

        /* 从头开始 最好保持和默认的状态一致*/
        from {
            transform: translateY(0);
        }

        /* 到结束为止 */

        to {
            transform: translateY(150px);
        }
    }

    /* 百分比定义 */

    @keyframes move2 {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(150px);
        }

        70% {
            transform: translateY(150px);
        }

        100% {
            transform: translateY(150px);
        }
    }

    /*  animation属性 */
    /* 需要将@keyframes中创建的动画绑到某一个选择器 否则不会产生动画效果 animation属性用于对动画进行绑定*/
    /* 语法 ：
            div{
                animation:动画名称 过渡时间 速度曲线 动画次数 延时时间
                }
            其中 必须设置动画名称和过渡时间 其他属性可以根据需求设置*/
</style>

<body>
    <!-- @keyframes规则  -->
    <!-- @keyframes规则用于创建动画 在@keyframes中规定某项css样式 就能创建由从一种样式逐渐变化为另一种样式的效果 可以改变任意多的样式任意多的次数 -->
    <!-- 需要使用百分比来规定变化发生的时间 或用关键词"form"和"to" 等同于0%和100% 0%是动画的开始 100%是动画的完成 -->


    <!-- @keyframes书写方法
         @keyframes 动画名称{动画过程 可以添加任意百分比处的动画细节}  -->

    <div class="box"></div>
</body>

</html>